<ui:composition template="index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:define name="content">
		<h3 id="title-doc">
			<a href="" data-reveal-id="dlg-new" class="icon-plus"></a> | Usuários
		</h3>
		<p:growl id="global-growl" sticky="true" />
		<p:dataTable id="dataTable" var="user" value="#{userBean.users}"
			paginator="true" rows="25"
			paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			rowsPerPageTemplate="25, 50, 75, 100">

			<p:column>
				<f:facet name="header">
					<h:outputText value="Nome" />
				</f:facet>
				<h:outputText value="#{user.firstName} #{user.lastName}" />
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:outputText value="Email" />
				</f:facet>
				<h:outputText value="#{user.email}" />
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:outputText value="Data Nascimento" />
				</f:facet>
				<h:outputText value="#{user.birthdate}" />
			</p:column>

			<p:column>
				<f:facet name="header">
					<h:outputText value="Ações" />
				</f:facet>
				<span data-reveal-id="dlg-update"> <p:commandButton
						actionListener="#{userBean.select}" update="@(#form-update)"
						value="Alterar" process="dataTable" />
				</span>
				<p:commandButton action="#{userBean.delete}"
					actionListener="#{userBean.select}" value="Excluir"
					update="dataTable" process="dataTable" />
			</p:column>
		</p:dataTable>
	</ui:define>

	<!-- Dialogs -->
	<ui:define name="dialogs">
		<div id="dlg-new" class="reveal-modal medium">
			<a class="close-reveal-modal">&#215;</a>
			<h3>Adicionar Usuário</h3>
			
			<h:form id="form-new-admin-admin" enctype="multipart/form-data">
				<p:messages id="msg-new" autoUpdate="true" closable="true" showDetail="false" />

				<h:outputText for="new-firstName" value="Nome" />
				<p:inputText id="new-firstName" value="#{userBean.user.firstName}"
					required="true" validator="validaAlfaNumerico"
					requiredMessage="Favor informar o nome!" />

				<h:outputText for="new-lastName" value="Sobrenome" />
				<p:inputText id="new-lastName" value="#{userBean.user.lastName}"
					required="true" validator="validaAlfaNumerico"
					requiredMessage="Favor informar o sobrenome!" />

				<h:outputText for="new-email" value="Email" />
				<p:inputText id="new-email" value="#{userBean.user.email}"
					required="true" validator="validaEmail"
					requiredMessage="Favor informar o email" />

				<h:outputText for="new-password" value="Senha" />
				<p:password id="new-password" value="#{userBean.user.password}"
					required="true" feedback="true" match="new-confirmPassword" />

				<h:outputText for="new-confirmPassword" value="Confirmar Senha" />
				<p:password id="new-confirmPassword" value="" required="true" />

				<h:outputText for="new-birthdate" value="Data de Nascimento" />
				<p:calendar id="new-birthdate" value="#{userBean.user.birthdate}"
					readonly="true" pattern="dd/MM/yyyy" locale="pt" />

				<h:outputText for="new-webSite" value="WebSite" />
				<p:inputText id="new-webSite" value="#{userBean.user.website}" />

				<h:outputText for="new-location" value="Localização" />
				<p:inputText id="new-location" value="#{userBean.user.location}" />
				
				<h:outputText for="new-foto" value="Foto" />
				<p:fileUpload id="new-foto-file" value="#{userBean.photo}" mode="simple" required="true"/>
				
				<h:outputText for="new-about" value="Sobre" />
				<p:inputTextarea id="new-about" value="#{userBean.user.about}"/>
					
				<p:commandButton actionListener="#{userBean.save}" styleClass="button"
				value="Salvar" update="form-new-admin-admin" process="form-new-admin-admin"  ajax="false">
				</p:commandButton>
				
				<p:button value="Cancelar" />
			</h:form>
		</div>

		<div id="dlg-update" class="reveal-modal medium">
			<a class="close-reveal-modal">&#215;</a>
			<h3>Alterar Usuário</h3>

			<h:form id="form-update" enctype="multipart/form-data">
				<p:messages id="msg-update" autoUpdate="true" closable="true"
					showDetail="false" />

				<h:outputText for="update-firstName" value="Nome" />
				<p:inputText id="update-firstName"
					value="#{userBean.user.firstName}" required="true"
					validator="validaAlfaNumerico"
					requiredMessage="Favor informar o nome!" />

				<h:outputText for="update-lastName" value="Sobrenome" />
				<p:inputText id="update-lastName" value="#{userBean.user.lastName}"
					required="true" validator="validaAlfaNumerico"
					requiredMessage="Favor informar o sobrenome!" />

				<h:outputText for="update-email" value="Email" />
				<p:inputText id="update-email" value="#{userBean.user.email}"
					required="true" validator="validaEmail"
					requiredMessage="Favor informar o email" />

				<h:outputText for="update-birthdate" value="Data de Nascimento" />
				<p:calendar id="update-birthdate" value="#{userBean.user.birthdate}"
					readonly="true" navigator="true" pattern="dd/MM/yyyy" locale="pt" />

				<h:outputText for="update-webSite" value="WebSite" />
				<p:inputText id="update-webSite" value="#{userBean.user.website}" />

				<h:outputText for="update-location" value="Localização" />
				<p:inputText id="update-location" value="#{userBean.user.location}" />

				<h:outputText for="update-about" value="Sobre" />
				<p:inputTextarea id="update-about" value="#{userBean.user.about}"/>
					
				<p:commandButton actionListener="#{userBean.update}"
					oncomplete="validateForm(xhr, status, args, 'dlg-update')"
					value="Salvar" update="form-update" process="form-update" />
				<p:button value="Cancelar" />
			</h:form>
		</div>
	</ui:define>

</ui:composition>